<template>
  <div>
    <van-nav-bar left-arrow @click-left="onClickLeft" />
    <img src="https://misc.gomein.net.cn/plus/images/u/login/logo_xh.png?v=20190624" alt class="a" />
    <van-tabs v-model="active" title-active-color="#f20c59" title-inactive-color="#99a6c4">
      <van-tab title="账号密码登录">
        <van-cell-group>
          <van-field
            v-model="form.mobile"
            clearable
            left-icon="phone-o"
            placeholder="请输入手机号/用户名"
            :error-message="error.mobile"
          />

          <van-field
            v-model="form.password"
            type="password"
            left-icon="lock"
            placeholder="请输入密码"
            clearable
            :error-message="error.password"
          />
        </van-cell-group>

        <van-row class="row">
          <van-col span="9" class="col">
            <a href="/registe" class="b">手机号快速注册</a>
          </van-col>
          <van-col span="8" offset="5">
            <a href="javascprit:;" class="b">找回密码</a>
          </van-col>
        </van-row>

        <van-button round class="btn" @click="login">登录</van-button>
      </van-tab>
      <van-tab title="短信验证码登录">
        <van-field clearable left-icon="phone-o" placeholder="手机号" v-model="mobile" :error-message="Errmobile" />

        <van-field type="password" left-icon="lock" placeholder="请输入短信验证码" v-model="verify" clearable >
          <van-button
            v-show="sendAuthCode"
            slot="button"
            plain
            type="primary"
            round
            color="#ff8dc0"
            @click="getAuthCode"
          >获取验证码</van-button>
          <van-button
            v-show="!sendAuthCode"
            slot="button"
            disabled
            type="primary"
            round
            color="red"
          >{{auth_time}}s</van-button>
        </van-field>

        <van-button round class="btn" @click="veriyLogin">同意协议并登录</van-button>
        <van-row>
          <div class="state">
            <span>
              未注册手机登录成功将自动注册，且代表您已同意协议
              <br />
              <a href="https://m.gome.com.cn/register_boder.html" class="c">《国美平台服务协议》</a>
              <a href="https://m.gome.com.cn/register_boder_privacy.html" class="c">《国美平台隐私政策》</a>
              <a href="https://m.gome.com.cn/meifubao_service_agreement.html" class="c">《美付宝服务协议》</a>
              <a style="display:none;" href="/privacy_policy.html" class="c">《国美隐私政策》</a>
            </span>
          </div>
        </van-row>
      </van-tab>
    </van-tabs>
    <img src="../assets/image/qq.png" alt class="img" />
  </div>
</template>

<script>
import Vue from 'vue'
import { Toast } from 'vant'

Vue.use(Toast)
export default {
  data () {
    return {
      active: '',
      verify: '',
      mobile: '',
      Errmobile: '',
      form: {
        mobile: '',
        password: ''
      },
      error: {
        mobile: '',
        password: ''
      },
      sendAuthCode: true /* 布尔值，通过v-show控制显示‘获取按钮’还是‘倒计时’ */,
      auth_time: 0 /* 倒计时 计数器 */
    }
  },
  methods: {
    onClickLeft () {
      this.$router.push('/')
    },
    async login () {
      // 验证
      let mobileRe = /^1(3|5|7|8|9)\d{9}$/
      if (mobileRe.test(this.form.mobile) || this.form.mobile.length < 20) {

      } else {
        this.error.mobile = '手机号码或用户名格式不正确'
        return false
      }

      let passwordRe = /^[0-9a-zA-Z_]{6,18}$/
      if (!passwordRe.test(this.form.password)) {
        this.error.password = '密码必须是6~18位 数字，字母，下划线'
        return false
      }

      const { data: res } = await this.$http.post('/login', this.form)
      // console.log(res)
      if (res.ok === 1) {
        sessionStorage.setItem('mobile', this.form.mobile)
        sessionStorage.setItem('token', res.data.token)
        sessionStorage.setItem('userid', res.data.id)

        Toast.success('登录成功!')
        this.$router.push('/')
      } else {
        Toast.fail(res.error)
      }
    },
    async getAuthCode () {
      let mobileRe = /^1(3|5|7|8|9)\d{9}$/
      if (!mobileRe.test(this.mobile)) {
        this.Errmobile = '手机号码格式不正确'
        return false
      }

      this.sendAuthCode = false
      this.auth_time = 60
      var time = setInterval(() => {
        this.auth_time--
        if (this.auth_time <= 0) {
          this.sendAuthCode = true
          clearInterval(time)
        }
      }, 1000)

      await this.$http.get('/sends', { params: { mo: this.mobile } })
      // console.log(res)
    },
    async veriyLogin () {
      // console.log(this.verify)
      const { data: res } = await this.$http.get('/verilogin', { params: { verify: this.verify } })
      if (res.ok === 1) {
        sessionStorage.setItem('mobile', this.mobile)
        sessionStorage.setItem('token', res.token)
        Toast.success('登录成功!')
        this.$router.push('/')
      } else {
        Toast.fail(res.error)
      }
      // console.log(res)
    }
  }
}
</script>

<style lang='less'>
body{
  background-color: #fff;
}
.a {
  width: 36%;
  margin-left: 34%;
}
.col {
  margin-left: 30px;
}
.b {
  color: #78bee9;
  font-size: 108%;
  padding-left: 15px;
}
.row {
  margin-top: 35px;
}
.btn {
  color: #fff;
  width: 73%;
  margin-left: 15%;
  margin-top: 15%;
  font-size: 127%;
  background: -webkit-linear-gradient(left, #fa1e8c 0, #fc1e56 100%);
}
.c {
  color: #78bee9;
  font-size: 108%;
}
.state {
  margin: 0.3rem 0 0;
  font-size: 0.24rem;
  color: #999;
  padding-left: 12%;
  margin-top: 5%;
}
.img {
  margin-left: 12%;
  margin-top: 21%;
}
</style>>
